<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>物料清单</title>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <span class="span8 text-ellapse">
            <a href="xuanzeshouhuobm.html"><i class="icon-angle-left icon-large"></i></a>南批发部南批发部南批发部南批发部
        </span>
        <a href="../shengou/zengjiawuliao.html" class="span2 font32">
            增加物料
        </a>
    </div>
    <div class="main" style="overflow-y: auto">
        <div class="item-header">前厅部门</div>
        <!-- 单据列表-->
        <table class="danju bg-white">
            <tr class="bg-fa">
                <th style="width:2%"></th>
                <th style="width:18%">物料名称</th>
                <th style="width:15%">数量</th>
                <th style="width:10%">单位</th>
                <th style="width:15%">条只数</th>
                <th style="width:15%">单价</th>
                <th style="width:15%">金额</th>
                <!--<th style="width:10%"></th>-->
            </tr>
            <tr>
                <td class="state empty"></td>
                <td class="name text-left">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td><input type="number" placeholder="输入" pattern="[0-9]"/></td>
                <td><i>ml</i></td>
                <td><input type="number" placeholder="输入" pattern="[0-9]"/></td>
                <td><input class="price" type="text" placeholder="输入"/></td>
                <td><i>1000000.00</i><i class="icon-trash text-main font50 hidden"></i></td>
            </tr>
            <tr>
                <td class="state empty"></td>
                <td class="name text-left">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td><input type="number" placeholder="输入" pattern="[0-9]"/></td>
                <td><i>ml</i></td>
                <td><input type="number" placeholder="输入" pattern="[0-9]"/></td>
                <td><input class="price" type="text" placeholder="输入"/></td>
                <td><i>1000000.00</i><i class="icon-trash text-main font50 hidden"></i></td>
            </tr>
        </table>

        <div class="mt2 text-center empty-panel">
            <p><img src="../css/img/icon-kong.png" alt="" width="94"/></p>

            <p class="font32 text-99">空空如也，快去增加物料吧</p>
        </div>
    </div>
    <div class="footer">
        <button id="btn-del" class="btn btn-beizhu span3" type="button">删除</button>
        <button class="btn btn-submit span7" type="button">
            提交收货单
            <span class="text-66 font28">(共计<i id="sel-num">0</i>条)</span>
        </button>
    </div>
    <div class="footer">
        <button id="btn-del" class="btn btn-cancel span3" type="button">删除</button>
        <button class="btn btn-cancel span7" type="button" disabled>
            提交收货单
            <span class="font28">(共计<i id="sel-num">0</i>条)</span>
        </button>
    </div>
</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/msgBox.js"></script>
<script>
    //数量发生变化时设置样式和选中数量
    $("input[type='text']").on('blur', function () {
        var inputs = $(this).parents('tr').find("input");
        var flag = false;
        inputs.each(function () {
            if ($(this).val() != '') {
                flag = true;
                return false;
            }
        });

        if (flag) {
            if (!$(this).parent().siblings('td:first-child').hasClass('full')) {
                $(this).parent().siblings('td:first-child').addClass('full');
                $('#sel-num').text(parseInt($('#sel-num').text()) + 1);
            }
        }
        else {
            $(this).parent().siblings('td:first-child').removeClass('full');
            $('#sel-num').text(parseInt($('#sel-num').text()) - 1);
        }
    });

    //    单价只允许输入带两位小数的数字
    $('.price').on('keyup', function () {
        var v = amount($(this).val());
        $(this).val(v);
    });
    function amount(v) {
        var regStrs = [
            ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
            ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
            ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
            ['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
        ];
        for (i = 0; i < regStrs.length; i++) {
            var reg = new RegExp(regStrs[i][0]);
            v = v.replace(reg, regStrs[i][1]);
        }
        return v;
    }

    //    删除事件确认框
    $('.icon-trash').each(function () {
        $(this).on('click', function () {
            $.msgbox({
                msgContent: '确定删除该物料',
                cancel: function () {
                },
                submit: function () {
//                todo 保存跳转
                },
                close: false
            });
        });
    });

    //    删除按钮
    $('#btn-del').on('click', function () {
        $('.danju tr').find('.icon-trash').toggleClass('hidden');

    });
    //    提交确认框
    $('.btn-submit').on('click click', function () {
        $.msgbox({
            msgContent: '确认提交验货单',
            cancel: function () {
            },
            submit: function () {
//                todo 保存跳转
            },
            close: false
        });
    })
</script>
</body>
</html>